<template>
	<div class="login-box">
		<transition name="el-zoom-in-bottom">
			<div class="login-container" v-show="showLogin">
				<h3 class="login-title">
					<img src="../assets/logo.png" alt="" height="50">
				</h3>
				<div class="login-input-box">
					<div class="login-input-item">
						<input type="text" class="login-input" v-model="username" placeholder="请输入账号" />
					</div>
					<div class="login-input-item">
						<input type="password" class="login-input" v-model="password" placeholder="请输入密码" />
					</div>
					<div class="login-remember">
						<el-checkbox v-model="rememberChecked" checked style="color:#fff;" >记住密码</el-checkbox>
					</div>
					<div class="login-btn-box">
						<el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit2" :loading="loginLogining">登录</el-button>
					</div>
				</div>
			</div>
		</transition>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				username:'',
				password:'',
				rememberChecked:true,
				loginLogining:false,
				showLogin:false,
			}
		},
		methods:{
			handleSubmit2(ev){
				if(!this.username){
					this.$message({
						title: '警告',
						message: '登录账号不能为空',
						type: 'error'
					});
					return false;
				}
				if(!this.password){
					this.$message({
						title: '警告',
						message: '登录密码不能为空',
						type: 'error'
					});
					return false;
				}
				this.loginLogining = true;
				//发起http请求
                var url = '/admin/login/login';
                var data = {'username':this.username,'password':this.password};
                var tar = this;
                tar.Common.request(url, data, function(data){
                	tar.loginLogining = false;
                	if(data.success_code==0){
                		tar.$message({
							title: '警告',
							message: data.message,
							type: 'error'
						});
                	}else{
                		// console.log(data.result);
                		//登录成功,设置cookie
                		tar.Common.removeCookie('token');
                		tar.Common.setCookie('token',data.result.token);
                		tar.$message({
							title: '消息',
							message: data.message,
							type: 'success'
						});
                		//地址跳转
						tar.Common.jump(tar,tar.Common.url.HOME,1000);
                	}
                },function(data){
                	var message = '接口请求失败';
                	if(data.message){
                		message = data.message;
                	}
                	tar.loginLogining = false;
					tar.$message({
						title: '警告',
						message: message,
						type: 'error'
					});
                },this);
			},
		},
		mounted(){
			var _this = this;
			setTimeout(function(){
				_this.showLogin = true;
			},200);
		},
	};
</script>
<style>
html,body{
    height:100%;
}
.login-box{
	overflow: hidden;
	height:100%;
	background:url(../assets/bg.jpg) center center no-repeat;
}
.login-container {
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background-clip: padding-box;
    margin: 180px auto;
    width: 350px;
    padding: 35px 35px 35px 35px;

    background:rgba(0,0,0,.6);
    box-shadow: 0 0 15px rgba(0,0,0,.7);
}
.login-remember{
    margin-bottom:20px;
}
.login-title{
    margin: 0 auto 20px;
    text-align: center;
    color: #505458;
}
.login-title img{
	height:46px;
	width:auto;
}
.login-input-box .login-input-item{
	margin-bottom:20px;
}
.login-input-box .login-input-item:last-child{
	margin-bottom:0;
}
.login-input{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #bfcbd9;
    box-sizing: border-box;
    color: #1f2d3d;
    display: block;
    font-size: inherit;
    height: 36px;
    line-height: 1;
    outline: 0;
    padding: 3px 10px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 100%;
}
.login-input:focus{
	border-color: #8391a5
}
</style>